<template>
  <div
    class="playlist-container"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
  >
    <my-scroll ref="vs">
      <div class="outter">
        <div class="inner">
          <div class="top-wrap">
            <div class="topimg-wrap">
              <!-- 封面 -->
              <img :src="playlist.coverImgUrl + '?param=200y200'" alt />
            </div>
            <div class="info-wrap">
              <!-- 名字 -->
              <div class="title_box">
                <span class="gedan">歌单</span>
                <span class="title">{{ playlist.name }}</span>
              </div>
              <div class="play_count">
                <div>
                  <span>歌曲数</span>
                  <span>{{
                    playlist.tracks ? playlist.tracks.length : 0
                  }}</span>
                </div>
                <div>
                  <span>播放</span>
                  <span>{{ playlist.playCount | playCount }}</span>
                </div>
              </div>
              <div class="author-wrap">
                <!-- 头像 -->
                <img
                  class="avatar"
                  :src="playlist.creator.avatarUrl + '?param=100y100'"
                  v-if="playlist.creator !== undefined"
                  alt
                />
                <!-- 名字 -->
                <span class="name" v-if="playlist.creator !== undefined">{{
                  playlist.creator.nickname
                }}</span>
                <!-- 时间 -->
                <span class="time">{{ playlist.createTime | dateFormat }}</span>
              </div>
              <div class="btn_box">
                <div class="play-wrap">
                  <div @click="playList(playlist.tracks)">
                    <span class="iconfont icon-triangle-down"></span>
                    <span class="text">播放全部</span>
                  </div>
                  <span class="el-icon-plus"></span>
                </div>
                <div class="my_btn">
                  <span class="iconfont icon-shoucang"></span>
                  <span>收藏({{ playlist.subscribedCount }})</span>
                </div>
                <div class="my_btn">
                  <span class="iconfont icon-fenxiang"></span>
                  <span>分享({{ playlist.shareCount }})</span>
                </div>
                <!-- <div class="my_btn all_download" disable="true">
                  <span class="iconfont icon-xiazai"></span>
                  <span>下载全部</span>
                </div> -->
              </div>
              <div
                class="tag-wrap"
                v-if="playlist.tags && playlist.tags.length > 0"
              >
                <span class="tag">标签:</span>
                <ul>
                  <li v-for="(item, index) in playlist.tags" :key="index">
                    {{ item }}
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="desc-wrap">
            <span>简介:</span><span>{{ playlist.description }}</span>
          </div>
          <el-tabs v-model="activeIndex">
            <el-tab-pane label="歌曲列表" name="1">
              <table cellspacing="0" class="el-table playlit-table" stripe>
                <thead>
                  <th class="sort">序号</th>
                  <th class="opera">操作</th>
                  <th>音乐图片</th>
                  <th>音乐标题</th>
                  <th>歌手</th>
                  <th class="zj">专辑</th>
                  <th class="time">时长</th>
                </thead>
                <tbody>
                  <tr
                    class="el-table__row"
                    v-for="(item, index) in playlist.tracks"
                    :key="index"
                    @dblclick="playMusic(item)"
                  >
                    <td
                      class="td_sort"
                      style="width:50px;textAlign:center"
                      v-html="index + 1 < 10 ? '0' + (index + 1) : index + 1"
                    ></td>
                    <td class="td_opera" style="width:70px">
                      <!-- <span class="iconfont icon-shoucang" ></span> -->
                      <span
                        class=" iconfont icon-triangle-down"
                        @click="playMusic(item)"
                      ></span>

                      <span
                        class="iconfont icon-xiazai"
                        @click="download(item)"
                      >
                      </span>
                    </td>
                    <td>
                      <div class="img-wrap">
                        <img :src="item.al.picUrl + '?param=100y100'" alt />
                        <span class="iconfont icon-triangle-down"></span>
                      </div>
                    </td>
                    <td>
                      <div class="song-wrap">
                        <div class="name-wrap">
                          <!-- 名称 -->
                          <span>{{ item.name }}</span>
                          <!-- mv图标 -->
                          <span
                            v-if="item.mv != ''"
                            class="iconfont icon-mv"
                            @click="toMv(item.mv)"
                          ></span>
                        </div>
                      </div>
                    </td>
                    <td>{{ item.ar[0].name }}</td>
                    <td class="td_zj">{{ item.al.name }}</td>
                    <td class="td_time" style="width:80px;textAlign:center">
                      {{ item.dt | formDate }}
                    </td>
                  </tr>
                </tbody>
              </table>
            </el-tab-pane>
            <el-tab-pane :label="`评论(${total})`" name="2">
              <!-- 精彩评论 -->
              <div
                class="comment-wrap"
                v-if="hotComments !== undefined && hotComments.length !== 0"
              >
                <p class="title">
                  精彩评论
                  <span class="number">({{ hotComments.length }})</span>
                </p>
                <div class="comments-wrap">
                  <!-- 评论 -->
                  <div
                    class="item"
                    v-for="(item, index) in hotComments"
                    :key="index"
                  >
                    <div class="icon-wrap">
                      <!-- 头像 -->
                      <img :src="item.user.avatarUrl + '?param=50y50'" alt />
                    </div>
                    <div class="content-wrap">
                      <div class="content">
                        <span class="name">{{ item.user.nickname }}</span>
                        <span class="comment">：{{ item.content }}</span>
                      </div>
                      <!-- 回复 -->
                      <div class="re-content" v-if="item.beReplied.length != 0">
                        <span class="name">{{
                          item.beReplied[0].user.nickname
                        }}</span>
                        <span class="comment"
                          >：{{ item.beReplied[0].content }}</span
                        >
                      </div>
                      <div class="date">{{ item.time | dateFormat }}</div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 最新评论 -->
              <div class="comment-wrap">
                <p class="title">
                  最新评论
                  <span class="number">({{ total }})</span>
                </p>
                <div class="comments-wrap">
                  <!-- 评论 -->
                  <div
                    class="item"
                    v-for="(item, index) in comments"
                    :key="index"
                  >
                    <div class="icon-wrap">
                      <!-- 头像 -->
                      <img :src="item.user.avatarUrl + '?param=50y50'" alt />
                    </div>
                    <div class="content-wrap">
                      <div class="content">
                        <span class="name">{{ item.user.nickname }}</span>
                        <span class="comment">：{{ item.content }}</span>
                      </div>
                      <!-- 回复 -->
                      <div
                        class="re-content"
                        v-if="item.beReplied.length !== 0"
                      >
                        <span class="name">{{
                          item.beReplied[0].user.nickname
                        }}</span>
                        <span class="comment"
                          >：{{ item.beReplied[0].content }}</span
                        >
                      </div>
                      <div class="date">{{ item.time | dateFormat }}</div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 分页器 -->
              <!-- <div class="pagebox">
            <el-pagination
              @current-change="handleCurrentChange"
              background
              layout="prev, pager, next"
              :total="total"
              :current-page="pageNum"
              :page-size="pageSize"
            ></el-pagination>
          </div> -->
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </my-scroll>
  </div>
</template>

<script>
import { GetSong, GetListDetail, GetListComments } from "../../api/music"
import request from "../../api/request"
export default {
  name: "playlist",
  data() {
    return {
      loading: true,
      id: "",
      activeIndex: "1",
      // 总条数
      total: 0,
      // 页码
      pageNum: 1,
      pageSize: 10,

      playlist: {},
      hotComments: [],
      comments: [],
    }
  },
  filters: {
    formDate(date) {
      var m = parseInt(date / 1000 / 60)
      if (m < 10) {
        m = "0" + m
      }
      var s = parseInt((date / 1000) % 60)
      if (s < 10) {
        s = "0" + s
      }
      return m + ":" + s
    },
  },
  created() {
    this.id = this.$route.query.id
    this.listdetail()
    this.listcomments()
  },
  methods: {
    toMv(id) {
      this.$router.push(`/details?id=${id}`)
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.getPlaylistComments()
    },

    // 点击播放全部按钮触发的事件：将所有歌曲添加到播放列表中
    playList(list, index) {
      this.$store.commit("addlist", list)
    },

    // 获取歌单详情
    async listdetail() {
      const res = await GetListDetail({
        id: this.id,
      })
      this.avatarUrl = Object.freeze(res.playlist.creator.avatarUrl)
      this.playlist = Object.freeze(res.playlist)
      this.loading = false
    },

    // 获取歌单评论
    async listcomments() {
      const res = await GetListComments({
        id: this.id,
        limit: this.pageSize,
        offset: (this.pageNum - 1) * this.pageSize,
      })
      this.comments = Object.freeze(res.comments)
      this.hotComments = Object.freeze(res.hotComments)
      this.total = Object.freeze(res.total)
    },

    // 点击播放歌曲
    async playMusic(item) {
      this.$store.dispatch("getSong", { id: item.id, autoplay: true })
    },

    // 下载按钮
    async download(item) {
      let res = await request({
        url: "/song/url",
        data: {
          id: item.id,
        },
        method: "get",
      })
      if (res.data[0].url) {
        let url = res.data[0].url
        console.log(url)
        let link = document.createElement("a")
        link.style.display = "none"
        link.href = url
        link.download = item.name
        link.target = "_Blank"
        // document.body.appendChild(link)
        link.click()
        // location.href = url
      } else {
        this.$notify.error({
          title: "错误",
          message: `歌曲 ${item.name} 是vip歌曲无法获取`,
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import "../../scss/common.scss";
.playlist-container {
  width: 100%;
  height: 100%;
  user-select: none;
  position: relative;
  .outter {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    .inner {
      padding: 0px 10px;
      box-sizing: border-box;
      max-width: 1200px;
      width: 100%;
    }
  }
}

.el-tabs {
  margin: 0px 20px;
}

.top-wrap {
  width: 100%;
  padding: 0px 20px;
  margin-top: 20px;
  box-sizing: border-box;
  display: flex;
  position: relative;
  .topimg-wrap {
    width: 180px;
    height: 180px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .info-wrap {
    width: calc(100% - 180px) !important;
    padding-left: 30px;
    box-sizing: border-box;
    overflow: hidden;
    .btn_box {
      display: flex;
      margin-bottom: 10px;
      align-items: center;
    }
    .play-wrap {
      height: 30px;
      border-radius: 4px;
      background: $primary;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: 0.5s;
      div {
        padding: 0px 10px;
        border-right: 1px solid #ffffff;
      }
      span {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        color: white;
        font-size: 13px;
      }
      .text {
        height: 100%;
      }
      .iconfont {
        margin-right: 8px;
      }
      .el-icon-plus {
        font-size: 15px;
        padding: 0px 7px;
      }
    }
    .play-wrap:hover {
      cursor: pointer;
      opacity: 0.8;
    }
    .my_btn {
      margin: 10px 0px;
      margin-left: 20px;
      border: 1px solid #ccc;
      height: 30px;
      padding: 0 10px;
      border-radius: 5px;
      span {
        height: 30px;
        line-height: 30px;
        font-size: 13px;
        vertical-align: middle;
      }
      .iconfont {
        font-size: 16px;
        margin-right: 5px;
      }
    }
    // .all_download{
    //   cursor: ;
    // }
    // .my_btn:hover {
    //   cursor: pointer;
    // }
    .title_box {
      display: flex;
      justify-content: flex-start;
      margin-bottom: 10px;
      .gedan {
        font-size: 12px;
        height: 18px;
        line-height: 18px;
        width: 36px;
        color: $primary;
        border: 1px solid $primary;
        margin-right: 10px;
        margin-top: 10px;
        text-align: center;
      }
      .title {
        line-height: 40px;
        font-size: 24px;
        width: calc(100% - 200px);
        word-wrap: break-word;
        word-break: normal;
        font-weight: bold;
      }
    }

    .play_count {
      position: absolute;
      top: 30px;
      right: 40px;
      display: flex;
      div {
        span {
          display: block;
          text-align: right;
          color: rgb(131, 130, 130);
          font-size: 14px;
        }
        span:nth-child(1) {
          padding-bottom: 10px;
        }
      }
      div:nth-child(1) {
        padding-right: 20px;
        border-right: 1px solid rgb(131, 130, 130);
      }
      div:nth-child(2) {
        padding-left: 20px;
      }
    }
    .author-wrap {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        margin-right: 10px;
      }
      .name {
        margin-right: 10px;
      }
      .time {
        font-size: 14px;
      }
    }

    .tag-wrap {
      display: flex;
      margin: 15px 0px;
      ul {
        display: flex;
        li:not(:last-child)::after {
          content: "/";
          margin: 0 4px;
        }
      }
      span {
        margin: 0;
      }
    }
  }
}

.img-wrap {
  width: 40px;
  height: 40px;
  margin-right: 30px;
  overflow: hidden;
  position: relative;
  img {
    width: 100%;
    height: 100%;
  }
  .icon-triangle-down {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25px;
    height: 25px;
    color: $primary;
    font-size: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
    opacity: 1;
    transition: 0.5s;
    display: none;
  }

  tr:hover .icon-triangle-down {
    opacity: 1;
  }
}
.desc-wrap {
  margin: 10px 0px;
  line-height: 25px;
  word-break: break-all;
  word-wrap: break-word;
  padding: 0px 20px;
  box-sizing: border-box;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
  span:last-child {
    font-size: 15px;
    text-align: left;
  }
  span:first-child {
    font-weight: bold;
    margin-right: 10px;
    text-align: left;
  }
}
td {
  border: none;
  .iconfont {
    padding: 0px 5px;
    transition: 0.5s;
  }
  .icon-triangle-down {
    // display: none;
    font-size: 14px !important;
  }

  .iconfont:hover {
    color: $primary;
  }
  .icon-mv {
    color: $primary;
  }
}
tr {
  padding: 0px 10px;
  box-sizing: border-box;
}
tr:hover {
  cursor: pointer;
  background: rgb(236, 236, 236);
}
.icon-triangle-down::before {
  transform: translateX(1px);
}
li {
  list-style: none;
}

.title {
  text-align: left;
}

.playlist-container .comment-wrap {
  margin-bottom: 30px;
  .title {
    font-size: 20px;
    .number {
      color: black;
      font-size: 18px;
    }
  }
  .item {
    display: flex;
    padding-top: 20px;
    .icon-wrap {
      margin-right: 15px;
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }
    .date {
      color: #bebebe;
      font-size: 14px;
      text-align: left;
    }
    .content {
      text-align: left;
    }
    .content-wrap {
      padding-bottom: 20px;
      flex: 1;
      .name {
        color: #517eaf;
        font-size: 14px;
      }
      .comment {
        font-size: 14px;
      }
      .content,
      .re-content {
        margin-bottom: 10px;
      }
      .re-content {
        text-align: left;
        padding: 10px;
        background-color: #e6e5e6;
        border-radius: 5px;
      }
    }
  }
  .item:not(:last-child) .content-wrap {
    border-bottom: 1px solid #f2f2f1;
  }
}

.pagebox {
  display: flex;
  width: 100%;
  height: 60px;
  justify-content: center;
  align-items: center;
}
/deep/ .el-tabs__item.is-active {
  color: $primary;
}
/deep/ .el-tabs__active-bar {
  background-color: $primary;
}
/deep/ .el-tabs__nav div:hover {
  color: $primary;
}
/deep/ .el-loading-spinner i {
  color: $primary !important;
}
/deep/ .el-loading-text {
  color: $primary !important;
}

@media (max-width: 600px) {
  .top-wrap {
    padding: 0px;
    .topimg-wrap {
      width: 9.375rem;
      height: 9.375rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .info-wrap {
      width: calc(100% - 9.375rem) !important;
      padding-left: 0.625rem;
      box-sizing: border-box;
      overflow: hidden;
      .btn_box {
        display: flex;
        margin-bottom: 10px;
        align-items: center;
      }
      .play-wrap {
        height: 1.875rem;
        border-radius: 4px;
        background: $primary;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.5s;
        div {
          padding: 0px 10px;
          border-right: 1px solid #ffffff;
        }
        span {
          display: inline-block;
          height: 30px;
          line-height: 30px;
          color: white;
          font-size: 13px;
        }
        .text {
          height: 100%;
        }
        .iconfont {
          margin-right: 8px;
        }
        .el-icon-plus {
          font-size: 15px;
          padding: 0px 7px;
        }
      }
      .play-wrap:hover {
        cursor: pointer;
        opacity: 0.8;
      }
      .my_btn {
        display: none;
      }
      // .all_download{
      //   cursor: ;
      // }
      // .my_btn:hover {
      //   cursor: pointer;
      // }
      .title_box {
        display: flex;
        justify-content: flex-start;
        margin-bottom: 10px;
        .gedan {
          font-size: 12px;
          height: 18px;
          line-height: 18px;
          width: 36px;
          color: $primary;
          border: 1px solid $primary;
          margin-right: 10px;
          margin-top: 10px;
          text-align: center;
        }
        .title {
          line-height: 1.5625rem;
          font-size: 0.875rem;
          width: 100%;
          word-wrap: break-word;
          word-break: normal;
          font-weight: bold;
        }
      }

      .play_count {
        display: none;
      }
      .author-wrap {
        .time {
          display: none;
        }
      }
    }
  }
  .desc-wrap {
    padding: 0px;
    span {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
  }
  .sort {
    display: none;
  }
  .opera {
    // display: none;
  }
  .time {
    display: none;
  }
  .zj {
    display: none;
  }
  .td_sort {
    display: none;
  }
  .td_zj {
    display: none;
  }
  .td_time {
    display: none;
  }
  .td_opera {
    // display: none;
  }
  .icon-xiazai {
    display: none;
  }
}
</style>
